<script setup lang="ts">
import { ref, watch } from 'vue'
import { useRoute } from 'vue-router'
import { historyColumns } from './config'
import { loginHistory } from '@/api/user'
import { useFetch } from '@/composables/useFetch'
import BasePageLayout from '@/layouts/BasePageLayout.vue'
import type { IpaginationProps } from '@/components/ui/pagination/src/type'

const route = useRoute()

const logList = ref([])
const pagination = ref<IpaginationProps>()

// 页面请求
const { data: logDataResult, loading: logLoading, execute: getLogExecute } = useFetch((parmas: any) => loginHistory(parmas))

// 分页：时刻监听pageNo和pageSize的变化
watch([() => route.query?.pageNo, () => route.query?.pageSize], (nVal: any[]) => {
  const params = { pageNo: nVal[0], pageSize: nVal[1] }
  getLogList({ ...params })
})

const obj = Object.assign({}, { pageNo: 1, pageSize: 10 }, route.query)

getLogList(obj)

async function getLogList(params: any) {
  await getLogExecute(params)
  const { data, totalCount: total } = logDataResult.value!
  logList.value = data
  pagination.value = { total, pageNo: Number(route.query.pageNo || 1), pageSize: Number(route.query.pageSize || 10) }
}
</script>

<template>
  <BasePageLayout>
    <template #content>
      <a-table :loading="logLoading" :columns="historyColumns" :data-source="logList" size="middle" :pagination="false" />
      <GpPagination v-if="!logLoading" :pagination="pagination" />
    </template>
  </BasePageLayout>
</template>
